:root{
    /*任务栏颜色*/
    --taskbar-color:#002441;
    /*开始菜单背景色 及 一些active*/
    --bg-color:#004275;
    /*滚动条等一些hover颜色*/
    --hover-color:#195583;
    /*主色，用于开始菜单的item颜色*/
    --theme-color:#0063B1;
}
#microi_loading{
  font-size: 12px;
  background: var(--theme-color);
  background: linear-gradient(#fff, #fff, #fff);
  position: fixed;
  width:100%;
  height: 100%;
  z-index:123456789;
}
/*
#microi_loading .microi-load{
    font-size: 12px;
    text-align:center;
    position:absolute;
    top:50%;left:50%;
    z-index:999999;
    color:var(--theme-color);
    margin-left:-30px;
    margin-top:-30px;
    color: #5473E8;
}
.modal-loading .microi-load{
    margin-top:-60px;
}
#microi_loading .microi-loading{position:relative;display:inline-block}
#microi_loading .microi-loading #microi_loading_progress{
    margin-top: 23px;
    text-align: center;
    width: 65px;
}
#microi_loading .microi-loading .dot{position:absolute;opacity:0;width:64px;height:64px;-webkit-transform:rotate(225deg);-moz-transform:rotate(225deg);-o-transform:rotate(225deg);-ms-transform:rotate(225deg);transform:rotate(225deg);-webkit-animation-name:loading;-moz-animation-name:loading;-ms-animation-name:loading;-o-animation-name:loading;animation-name:loading;-webkit-animation-iteration-count:infinite;-moz-animation-iteration-count:infinite;-ms-animation-iteration-count:infinite;-o-animation-iteration-count:infinite;animation-iteration-count:infinite;-o-animation-duration:5.28s;-moz-animation-duration:5.28s;-webkit-animation-duration:5.28s;animation-duration:5.28s}
#microi_loading .microi-loading .dot:after{content:"";position:absolute;width:6px;height:6px;border-radius:50%;
    background: #409eff;
}
#microi_loading .microi-loading .dot:after,
#microi_loading .itdos-plugin-load-container .microi-loading .dot:after
{
    background: #5473E8;
}
#microi_loading .microi-loading .dot:nth-child(2){-webkit-animation-delay:.23s;-moz-animation-delay:.23s;-ms-animation-delay:.23s;-o-animation-delay:.23s;animation-delay:.23s}
#microi_loading .microi-loading .dot:nth-child(3){-webkit-animation-delay:.46s;-moz-animation-delay:.46s;-ms-animation-delay:.46s;-o-animation-delay:.46s;animation-delay:.46s}
#microi_loading .microi-loading .dot:nth-child(4){-webkit-animation-delay:.69s;-moz-animation-delay:.69s;-ms-animation-delay:.69s;-o-animation-delay:.69s;animation-delay:.69s}
#microi_loading .microi-loading .dot:nth-child(5){-webkit-animation-delay:.92s;-moz-animation-delay:.92s;-ms-animation-delay:.92s;-o-animation-delay:.92s;animation-delay:.92s}
@-webkit-keyframes loading{0%{-webkit-transform:rotate(225deg);opacity:1;-webkit-animation-timing-function:ease-out}
8%{-webkit-transform:rotate(345deg);-webkit-animation-timing-function:linear}
30%{-webkit-transform:rotate(455deg);-webkit-animation-timing-function:ease-in-out}
40%{-webkit-transform:rotate(690deg);-webkit-animation-timing-function:linear}
60%{-webkit-transform:rotate(815deg);opacity:1;-webkit-animation-timing-function:ease-out}
75%{-webkit-transform:rotate(965deg);-webkit-animation-timing-function:ease-out}
76%{opacity:0}
100%{opacity:0}
}
@-moz-keyframes loading{0%{-moz-transform:rotate(225deg);opacity:1;-moz-animation-timing-function:ease-out}
8%{-moz-transform:rotate(345deg);-moz-animation-timing-function:linear}
30%{-moz-transform:rotate(455deg);-moz-animation-timing-function:ease-in-out}
40%{-moz-transform:rotate(690deg);-moz-animation-timing-function:linear}
60%{-moz-transform:rotate(815deg);opacity:1;-moz-animation-timing-function:ease-out}
75%{-moz-transform:rotate(965deg);-moz-animation-timing-function:ease-out}
76%{opacity:0}
100%{opacity:0}
}
@keyframes loading{0%{transform:rotate(225deg);opacity:1;animation-timing-function:ease-out}
8%{transform:rotate(345deg);animation-timing-function:linear}
30%{transform:rotate(455deg);animation-timing-function:ease-in-out}
40%{transform:rotate(690deg);animation-timing-function:linear}
60%{transform:rotate(815deg);opacity:1;animation-timing-function:ease-out}
75%{transform:rotate(965deg);animation-timing-function:ease-out}
76%{opacity:0}
100%{opacity:0}
}
*/


/*第二版loading*/
/* -----------------------------------------
  =CSS3 Loading animations
-------------------------------------------- */
 
/* =Elements style
---------------------- */
.load-wrapp {
    /* float: left; */
    /* position: fixed; */
    /* left: calc(50% - 50px); */
    /* top: calc(50% - 50px); */
    width: 100px;
    height: 100px;
    margin-top: -50px;
    margin-left: -50px;
    text-align:center;
    position:absolute;
    top:50%;
    left:50%;
    z-index:999999;
    /* margin: 0 10px 10px 0; */
    /* padding: 20px 20px 20px; */
    border-radius: 5px;
    text-align: center;
    /* background-color: #d8d8d8; */
    z-index:123456789;
  }
   
  .load-wrapp p {
    padding: 0 0 20px;
  }
  .load-wrapp:last-child {
    margin-right: 0;
  }
   
  .line {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 15px;
    background-color: #4b9cdb;
  }
   
  .ring-1 {
    width: 10px;
    height: 10px;
    margin: 0 auto;
    padding: 10px;
    border: 7px dashed #4b9cdb;
    border-radius: 100%;
  }
   
  .ring-2 {
    position: relative;
    width: 45px;
    height: 45px;
    margin: 0 auto;
    border: 4px solid #4b9cdb;
    border-radius: 100%;
  }
   
  .ball-holder {
    position: absolute;
    width: 12px;
    height: 45px;
    left: 17px;
    top: 0px;
  }
   
  .ball {
    position: absolute;
    top: -11px;
    left: 0;
    width: 16px;
    height: 16px;
    border-radius: 100%;
    background: #4282b3;
  }
   
  .letter-holder {
    padding: 16px;
  }
   
  .letter {
    float: left;
    font-size: 14px;
    color: #777;
  }
   
  .square {
    width: 12px;
    height: 12px;
    border-radius: 4px;
    background-color: #4b9cdb;
  }
   
  .spinner {
    position: relative;
    width: 45px;
    height: 45px;
    margin: 0 auto;
  }
   
  .bubble-1,
  .bubble-2 {
    position: absolute;
    top: 0;
    width: 25px;
    height: 25px;
    border-radius: 100%;
    background-color: #4b9cdb;
  }
   
  .bubble-2 {
    top: auto;
    bottom: 0;
  }
   
  .bar {
    float: left;
    width: 15px;
    height: 6px;
    border-radius: 2px;
    background-color: #4b9cdb;
  }
   
  /* =Animate the stuff
  ------------------------ */
  .load-1 .line:nth-last-child(1) {
    animation: loadingA 1.5s 1s infinite;
  }
  .load-1 .line:nth-last-child(2) {
    animation: loadingA 1.5s 0.5s infinite;
  }
  .load-1 .line:nth-last-child(3) {
    animation: loadingA 1.5s 0s infinite;
  }
   
  .load-2 .line:nth-last-child(1) {
    animation: loadingB 1.5s 1s infinite;
  }
  .load-2 .line:nth-last-child(2) {
    animation: loadingB 1.5s 0.5s infinite;
  }
  .load-2 .line:nth-last-child(3) {
    animation: loadingB 1.5s 0s infinite;
  }
   
  .load-3 .line:nth-last-child(1) {
    animation: loadingC 0.6s 0.1s linear infinite;
  }
  .load-3 .line:nth-last-child(2) {
    animation: loadingC 0.6s 0.2s linear infinite;
  }
  .load-3 .line:nth-last-child(3) {
    animation: loadingC 0.6s 0.3s linear infinite;
  }
   
  .load-4 .ring-1 {
    animation: loadingD 1.5s 0.3s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite;
  }
   
  .load-5 .ball-holder {
    animation: loadingE 1.3s linear infinite;
  }
   
  .load-6 .letter {
    animation-name: loadingF;
    animation-duration: 1.6s;
    animation-iteration-count: infinite;
    animation-direction: linear;
  }
   
  .l-1 {
    animation-delay: 0.48s;
  }
  .l-2 {
    animation-delay: 0.6s;
  }
  .l-3 {
    animation-delay: 0.72s;
  }
  .l-4 {
    animation-delay: 0.84s;
  }
  .l-5 {
    animation-delay: 0.96s;
  }
  .l-6 {
    animation-delay: 1.08s;
  }
  .l-7 {
    animation-delay: 1.2s;
  }
  .l-8 {
    animation-delay: 1.32s;
  }
  .l-9 {
    animation-delay: 1.44s;
  }
  .l-10 {
    animation-delay: 1.56s;
  }
   
  .load-7 .square {
    animation: loadingG 1.5s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite;
  }
   
  .load-8 .line {
    animation: loadingH 1.5s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite;
  }
   
  .load-9 .spinner {
    animation: loadingI 2s linear infinite;
  }
  .load-9 .bubble-1,
  .load-9 .bubble-2 {
    animation: bounce 2s ease-in-out infinite;
  }
  .load-9 .bubble-2 {
    animation-delay: -1s;
  }
   
  .load-10 .bar {
    animation: loadingJ 2s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite;
  }
   
  @keyframes loadingA {
    0 {
      height: 15px;
    }
    50% {
      height: 35px;
    }
    100% {
      height: 15px;
    }
  }
   
  @keyframes loadingB {
    0 {
      width: 15px;
    }
    50% {
      width: 35px;
    }
    100% {
      width: 15px;
    }
  }
   
  @keyframes loadingC {
    0 {
      transform: translate(0, 0);
    }
    50% {
      transform: translate(0, 15px);
    }
    100% {
      transform: translate(0, 0);
    }
  }
   
  @keyframes loadingD {
    0 {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(180deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
   
  @keyframes loadingE {
    0 {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
   
  @keyframes loadingF {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
   
  @keyframes loadingG {
    0% {
      transform: translate(0, 0) rotate(0deg);
    }
    50% {
      transform: translate(70px, 0) rotate(360deg);
    }
    100% {
      transform: translate(0, 0) rotate(0deg);
    }
  }
   
  @keyframes loadingH {
    0% {
      width: 15px;
    }
    50% {
      width: 35px;
      padding: 4px;
    }
    100% {
      width: 15px;
    }
  }
   
  @keyframes loadingI {
    100% {
      transform: rotate(360deg);
    }
  }
   
  @keyframes bounce {
    0%,
    100% {
      transform: scale(0);
    }
    50% {
      transform: scale(1);
    }
  }
   
  @keyframes loadingJ {
    0%,
    100% {
      transform: translate(0, 0);
    }
   
    50% {
      transform: translate(80px, 0);
      background-color: #f5634a;
      width: 25px;
    }
  }